<template>
  <PageWrapper>
    <div>
      <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        style="width: 256px"
        mode="inline"
        :items="items"
      />
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { h, ref } from 'vue';
  import { SettingOutlined } from '@ant-design/icons-vue';
  import { PageWrapper } from '@/components/Page';
  import { useFileDataApi } from '@/api/assess/assess';
  import { useUserStore } from '@/store/modules/user';

  const selectedKeys = ref(['1']);
  const openKeys = ref(['sub1']);
  const fileData = ref([]);

  const getFileData = async () => {
    const data = await useFileDataApi({ userid: useUserStore().userid });
    if (data.data.success && data.data.message === 'Success') {
      fileData.value = data?.data?.fileData.map((item) => {
        const array = Array.from(Object.keys(item.stageData), (key) => ({
          name: key,
          resources: item.stageData[key]?.resources,
        }));
        item.stageData = array;
        return item;
      });

      console.log('🚀 ~ getFileData ~ fileData:', fileData.value);
    }
  };

  getFileData();
  const items = ref([
    {
      key: 'sub1',
      icon: () => h(SettingOutlined),
      label: 'Navigation Three',
      title: 'Navigation Three',
      children: [
        {
          key: '3',
          label: 'Option 3',
          title: 'Option 3',
        },
        {
          key: '4',
          label: 'Option 4',
          title: 'Option 4',
        },
        {
          key: 'sub1-2',
          label: 'Submenu',
          title: 'Submenu',
          children: [
            {
              key: '5',
              label: 'Option 5',
              title: 'Option 5',
            },
            {
              key: '6',
              label: 'Option 6',
              title: 'Option 6',
            },
          ],
        },
      ],
    },
    {
      key: 'sub2',
      icon: () => h(SettingOutlined),
      label: 'Navigation Four',
      title: 'Navigation Four',
      children: [
        {
          key: '7',
          label: 'Option 7',
          title: 'Option 7',
        },
        {
          key: '8',
          label: 'Option 8',
          title: 'Option 8',
        },
        {
          key: '9',
          label: 'Option 9',
          title: 'Option 9',
        },
        {
          key: '10',
          label: 'Option 10',
          title: 'Option 10',
        },
      ],
    },
  ]);
</script>
